SideButton Marketing Website Knowledge Modules

Standalone authentication page for the SideButton Chrome extension. No Header or Footer -- a minimal centered card with email/password form on a light gradient background. After successful login, credentials (email, userCode, mcpUrl) are sent to the extension via three methods (chrome.runtime.sendMessage, window.postMessage, localStorage), then the page shows a success view with green checkmark and auto-closes after 2.5 seconds. The page also displays hardcoded test credentials for Phase 1 development. 1. Verify form fields present

Feature page for AI Automation — the overview page explaining how SideButton enables zero-config browser control for AI tools. Uses the shared FeatureHero component with "Zero Config" badge (success/green color). Includes: AIToolsGrid component (4 cards linking to integration pages with setup time badges), dashboard screenshot section with /screenshots/actions.png, ComparisonTable component (6-row traditional vs SideButton comparison), CapabilityList component (6 capability cards in default single-column layout), ExamplePrompts component (6 quote cards), Related Features 3-card grid, and dark FeatureCTA section. Includes BreadcrumbList and HowTo JSON-LD schemas for SEO.

Feature page for SideButton Browser MCP — the MCP server that gives AI tools (Claude Code, Cursor, Windsurf) full browser control. Includes: animated hero with live chat mock (support inbox scenario with auto-drafting reply cycling through 3 conversations), "How It Works" architecture diagram (AI Tool -> JSON-RPC -> SideButton MCP -> WebSocket -> Browser) with run log screenshot, MCP Tools Reference grid (8 tools in 2-column layout via CapabilityList component), Quick Setup section with 3 tabbed config examples (Claude Code / Cursor / Windsurf) and copy buttons, "Why Browser MCP?" 3-paragraph explainer, Related Features 3-card grid, and dark CTA section.

Feature page for the SideButton AI Chat Panel — the built-in chat interface that lets users talk to AI on any website. Uses the shared FeatureHero component with "Works on any website" badge (primary/teal color). Showcases 6 capability cards via CapabilityList component (2-column grid), 4-step "How It Works" with numbered step cards and connecting gradient lines, Privacy & Control section with 4 benefit cards (inline SVG icons), LLM providers row (4 emoji icons: Claude, ChatGPT, Ollama, Any LLM), Related Features 3-card grid, and dark CTA with Chrome Web Store install link. Includes HowTo and BreadcrumbList JSON-LD schemas for SEO.

Feature page for SideButton Embed Buttons — contextual one-click automation buttons that appear inline on websites. The extension detects page context, shows relevant workflow buttons, and executes on click. Uses the shared FeatureHero component with "Contextual Automation" badge (accent/orange color). Includes: 4-step "How Embed Buttons Work" section with numbered cards, interactive Gmail compose mockup with 3 embed buttons (Draft Reply, Summarize Thread, Extract Tasks), Supported Platforms section with dynamically-generated platform cards from getEmbedSupportedPlatforms() plus a static "Any Website" card with dashed border, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas for SEO.

Feature page for the SideButton Workflow Engine — YAML-defined automation workflows with browser actions, AI steps, control flow, and data handling. Uses the shared FeatureHero component with "Workflow Engine" badge (primary/teal color). Includes: custom 4-category building blocks grid (Browser Actions 6 items, AI Steps 4 items, Control Flow 4 items, Data Handling 4 items — each in a white card with colored icon header), a YAML code example section with dark panel and copy button, a Growing Workflow Library section with screenshot and dynamically-generated platform cards from marketplace data, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas. This is the only feature page with client-side JavaScript for the copy button.

The SideButton homepage — the main landing page at sidebutton.com. A 8-section marketing page built with Astro, targeting developers and engineering teams. Features: two-column hero with demo video placeholder, "Three layers of agent intelligence" explainer cards, 3-step quick-start terminal commands, knowledge packs showcase with browse link, community role templates grid (6 roles), MCP client compatibility pills, dual-CTA section (For Teams / Open Source), and testimonial quotes. The page emphasizes AI agents and knowledge packs rather than the previous browser automation / embed buttons framing.

The integrations marketplace — a catalog of all platform integrations with their automation workflows. Shows: skill packs promo banner (install command), categories quick links (color-coded pills), and a 4-column "All Platforms" grid sorted by workflow count. Each platform card shows logo, name, and workflow count. Links to platform detail pages, categories index, and publishers index. Includes bottom CTA. Sub-pages include platform detail (with tier filter + per-platform category links), workflow detail (with install lifecycle, how-it-works steps, workflow sequence chain, solutions cross-link), categories index/detail, and publishers index/detail.

Interactive demo page that showcases SideButton capabilities with live, hands-on examples. Features a connection status dashboard (3 primary cards: Server, Browser Extension, SideButton Ready; 3 secondary cards: LLM Provider, Embed Buttons, Chat Panel; 1 account bar with help text), followed by 5 interactive demo sections, a step types reference with tabbed categories, and a bottom CTA. The TL;DR demo makes a real API call to the local SideButton server; all other demos are client-side only. 1. Run TL;DR Summarization Demo

The Knowledge Packs directory at /skills is the public-facing catalog of installable skill packs for SideButton AI agents. It lets users browse 21 available packs and 35 coming-soon packs, search by name/description, filter by category, and view detail pages with module lists, roles, and install commands. A "Publish knowledge packs for free" banner encourages community contributions via /contribute. No authentication required. No query params observed — search and filters are client-side state only.

Six static legal pages sharing the same Astro Layout with Header and Footer. All follow an identical layout: centered prose content (max-w-3xl) under an H1 heading with a "Last updated" or subtitle line. Content is pure text with H2/H3 subsections, tables, lists, and mailto/external links. No interactive elements beyond navigation and standard anchor links. Pages cover privacy, terms, content policy, DMCA, trademarks, and imprint.

Agent Fleet management page -- shows all connected cloud VM agents with live health metrics, screenshots, activity status, and action buttons. Each agent row displays a live screenshot thumbnail, avatar icon, display name (or hostname), IP address, role badges (SE/QA/SD/PM), shared/share-count badge, system health (CPU, MEM, LOAD, DISK, SWAP) with color-coded warnings, software version badges with drift detection, activity/connectivity status badges (BUSY/IDLE + Online/Offline/Error), running/queued/waiting job links, last-seen timestamp, and action buttons to run jobs, view queue, or refresh data. The page header shows total agent count and online count (error count appended only when errors exist). Browser tab title: "Agents - SideButton Fleet".

Workflow trigger automation page -- allows creating automations that automatically dispatch workflow jobs to agents based on events from Jira, SideButton, or a cron schedule. Each automation has a WHEN trigger configuration and a WHAT action configuration (workflow, agent, effort level). Automations can be enabled/disabled via toggle switches, manually triggered, and show dispatch count badges linking to the queue. The page lists all automations with their trigger type, workflow label, and action buttons.

Chat interface for Fleet Control -- the default landing page of the authenticated portal. A three-panel layout: left sidebar (Fleet Control navigation), middle panel (conversation history list with "+ New Chat" button and search bar), and right panel (active conversation messages or empty state). Users chat with an AI assistant that can run workflows on agents, queue dispatch jobs, list available workflows, list agents, and answer questions. The assistant renders markdown in responses (bold text, inline code, numbered/bullet lists, paragraphs). The portal redirects /portal to /portal/chat automatically.

Job execution history page -- lists all workflow jobs that have been dispatched to agents. Shows a filterable, searchable list of jobs with status badges, workflow names, ticket references, agent assignments, step counts, durations, and relative timestamps. Each job links to a detail page showing input parameters, step execution timeline with task progress, expandable step logs, and output/error cards. Jobs are created when workflows are dispatched to agents (via Run Workflow, Run Job, Queue dispatch, or Automation trigger). Supports cancel (running/waiting) and resend (failed/cancelled) actions.

Dispatch Queue page -- a work queue for scheduling workflow jobs to be dispatched to agents. Items can be added manually via the "+ Add Item" form, by pasting batch Jira tickets in Chat, or automatically via Automations. Each queue item specifies a workflow, optional agent assignment, ticket URL/key, effort level, and optional hint. Items progress through states: Waiting (10s delay) -> Queued -> Dispatching -> Dispatched -> Completed, or Failed/Cancelled. The page has filter tabs, search, workflow/agent filter dropdowns, and an inline "Add to Queue" form panel.

Settings page for Fleet Control -- a multi-tab configuration interface for managing the fleet. Seven tabs: General (LLM provider, model, API key, effort level), Agents (per-agent config with roles, entry paths, env vars, RDP downloads, avatar picker, danger zone), Assistant (chat bot name, persona prompt, avatar URL), Issue Tracking (Jira credentials, webhook URL, deploy/test webhook), Slack (channel connections with bot token setup and live testing), Knowledge Packs (default pack status, ZIP upload, workflow list), and Logs (incoming webhook event history with MATCH/SKIP status, pagination, and matched-only filter). All tabs have editable forms with save feedback. Tabs are deep-linkable via URL query parameter.

Workflow management page for Fleet Control -- lists all registered workflows grouped by source pack, with enable/disable toggles, role badges, descriptions, slugs, step counts, source badges, and last-updated timestamps. Each workflow links to a detail page showing the full step definition including step types (terminal.open, terminal.run, poll), agent prompts, input parameters, and configuration. Workflows are YAML-defined automation templates that get dispatched to agents as jobs. Browser tab title: List = "Workflows - SideButton Fleet", Detail = "{slug} - SideButton Fleet"

Login page for the SideButton Publisher Portal. Server-side rendered (SSR) page using the Astro Layout with Header and Footer. Features a centered email-only login form (no password field). On success, redirects to /portal or a server-specified redirect URL. If the user is already authenticated (Astro.locals.auth), the server redirects to /portal before rendering the page. Displays demo account emails in a hint section below the form. 1. Verify login form renders

Pricing page for SideButton with three tiers: Free (Chrome extension install CTA), Pro (contact sales, "14-day trial" badge, marked as "Most Popular"), and Team (contact sales). The page is fully static with no billing/payment integration -- Pro and Team CTAs link to mailto addresses. Page layout: hero section with gradient text, 3-column pricing cards, social proof stats bar, feature comparison table (7 categories, ~30 rows), FAQ accordion (8 questions), and a bottom CTA section. A PricingToggle component (monthly/annual switch) exists in the codebase but is not imported or rendered on the current page -- all pricing display is static.

Solutions section -- browse AI-powered browser automations organized by professional role. Three-level page hierarchy: index (all roles grid + popular automations), role detail (hero + jobs list + platforms + category workflows), and job detail (tier badge + workflow card + sibling jobs). Data comes from an SQLite database (marketplace.db) via lib/marketplace.ts which exposes getRoles(), getJobs(), getJobsByRole(), getPlatform(), getWorkflow(), and getCategory(). Pages are statically generated at build time using Astro's getStaticPaths(). Every page includes JSON-LD structured data (BreadcrumbList, CollectionPage) for SEO.